<template>
  <ContainerGroup class="report-wraper">
    <Container height="fill" :scroll-y="true" display="flexY">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="院前准备中心" name="first" class="yq-box">
          <OperationContainer align="right" style="margin-bottom: 10px">
            <Button icon="export" @click="_DownLoad">导出</Button>
          </OperationContainer>
          <el-table
            v-loading="loading"
            :data="tableData"
            :span-method="objectSpanMethod"
            stripe
            border
            :header-cell-style="{ background: '#f5f7fa' }"
            style="width: 100%"
            height="100%"
            size="small"
          >
            <el-table-column
              prop="deptName"
              label="科室"
              align="center"
              width="120"
            />
            <el-table-column
              prop="docName"
              align="center"
              label="开单医生"
              width="120"
            />
            <el-table-column prop="name" align="left" label="患者信息" width="220">
              <template slot-scope="scope">
                <p style="font-size: 14px">姓名：{{ scope.row.name }}</p>
                <p style="font-size: 14px">诊断：{{ scope.row.diagName }}</p>
                <p style="font-size: 14px">电话：{{ scope.row.linkmanTel }}</p>
                <p style="font-size: 14px">日期：{{ scope.row.createTime }}</p>
                <div style="font-size: 14px; display: flex">
                  <div style="flex: 0 0 42px">备注:</div>
                  <div style="font-size: 14px; color: red">
                    {{ scope.row.beiZhu }}
                  </div>
                </div>
              </template> </el-table-column
            >>
            <el-table-column
              prop="examineListName"
              align="center"
              label="检验套组"
            />
            <el-table-column prop="doneExamine" align="center" label="已检验" />
            <el-table-column
              prop="examineProgress"
              align="center"
              label="检验进度"
              width="120"
            />
            <el-table-column prop="notInspectName" align="center" label="未检查" />
            <el-table-column prop="inspectName" align="center" label="已检查" />
            <el-table-column
              prop="inspectProgress"
              align="center"
              label="检查进度"
              width="120"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="日间病房中心" name="second" class="yq-box">
          <CheckReportRJSS v-if="activeName === 'second'" />
        </el-tab-pane>
        <el-tab-pane label="院前患者统计" name="thrond" class="yq-box">
          <CheckStatistics v-if="activeName === 'thrond'" />
        </el-tab-pane>
      </el-tabs>
      
    </Container>
  </ContainerGroup>
</template>

<script>
import CheckReportRJSS from './CheckReportRJSS'
import CheckStatistics from './CheckStatistics'
import {
  getReportListIntegratedDownLoadExcel,
  getReportListIntegrated,
} from "../../utils/apis/preparedness";
export default {
  name: "CheckReport",
  components: {CheckReportRJSS, CheckStatistics },
  data() {
    return {
      activeName: 'first',
      spanArr: [],
      psition: 0,
      loading: false,
      tableData: [],
      deptCodeList: this.$route.query.deptCodeList,
      jobNumber:this.$route.query.jobNumber,
    };
  },
  mounted() {
    this.getSpanArr();
  },
  methods: {
    handleTabClick(tab){
      if(tab.name==='first'){
         this.getSpanArr();
      }
    },
    getSpanArr() {
      const params = {
        deptCodeList: this.deptCodeList,
        jobNumber:this.jobNumber
      };
      console.log(params);
      this.loading = true;
      getReportListIntegrated(params).then((res) => {
        this.loading = false;
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.rowspan();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    rowspan() {
      this.spanArr = [];
      (this.tableData||[]).forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (
            this.tableData[index].deptName ===
            this.tableData[index - 1].deptName
          ) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
      console.log(this.spanArr);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 表格合并行
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    _DownLoad() {
      const params = {
        deptCodeList: this.deptCodeList,
        jobNumber:this.jobNumber
      };
      getReportListIntegratedDownLoadExcel(params).then((res) => {
        // if (res.data.code === 200) {
        const blob = new Blob([res.data]);
        const fileName = "日报表(院前)" + ".xlsx";
        const URL = window.URL || window.webkitURL || window.moxURL;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName; // 命名下载名称
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob); // 表示一个指定的file对象或Blob对象
          document.body.appendChild(elink);
          elink.click(); // 点击触发下载
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
        // }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.report-wraper{
    overflow: hidden;
  .yq-box{
    height: calc(100vh - 100px);
  }
}

</style>
